<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :append-to-body="true"
    class="xs-common-dialog-size"
    width="530px"
    @closed="handleClose">
    <SectionTitle title="文件导入" font-size="16px" style="margin-bottom:20px;"/>
    <el-radio-group v-model="uploadType">
      <template v-for="item in uploadConfig">
        <el-radio v-if="item.isShow" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
      </template>
    </el-radio-group>
    <OrderUpload
      :import-api="getUploadAttribute('importApi')"
      custom-error
      style="padding: 14px 0;"
      @handleSuccess="handleSuccess"
      @handleError="handleError" />
    <div class="dialog-footer">
      <ExportButton
        :export-api="getUploadAttribute('exportApi')"
        :export-name="getUploadAttribute('exportTitle')"
        is-diy>
        <span class="active-btn">{{ getUploadAttribute('exportTitle') + '下载' }}</span>
      </ExportButton>
      <!-- :query-data="setExtendParams" -->
    </div>
  </el-dialog>
</template>
<script>
import SectionTitle from '@/components/Title';
import ExportButton from '@/components/ExportButton';
import OrderUpload from '@/components/OrderList/orderUpload';
import { hasRouteAuth } from '@/utils/permission';
import { showModal } from '@/utils/message';
export default {
  name: 'UploadDialog',
  components: { ExportButton, OrderUpload, SectionTitle },
  props: {
    uploadConfig: {
      type: Array,
      default() {
        return [
          {
            id: 0,
            name: '导入新增',
            importApi: '/admin/project/list/importAdd',
            exportTitle: '导入模板',
            exportApi: 'admin/project/template/download',
            isShow: hasRouteAuth('crm:project:importAdd')
          },
          {
            id: 1,
            name: '导入编辑',
            importApi: '/admin/project/list/importEdit',
            exportTitle: '导入模板',
            exportApi: 'admin/project/template/download',
            isShow: hasRouteAuth('crm:project:importEdit')
          }
        ];
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      uploadType: 0
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    dialogShow() {
      this.uploadType = 0;
      this.dialogVisible = true;
    },
    getUploadAttribute(val) {
      const currUploadItem = this.uploadConfig.find(item => item.id === this.uploadType);
      return currUploadItem[val];
    },
    handleSuccess() {
      this.handleClose();
      this.$message.success('导入成功');
      this.$emit('uploadList');
    },
    handleError(msg) {
      this.handleClose();
      showModal(msg);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-radio__label {
    font-size: 14px;
  }
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.active-btn {
  color: #406eff;
  cursor: pointer;
}
</style>
